import React from 'react';
import {useDroppable} from '@dnd-kit/core';
import {rectSortingStrategy, verticalListSortingStrategy, SortableContext} from "@dnd-kit/sortable";

const style = {
  backgroundColor: 'white',
  border: '1px solid gray',
  margin: '10px auto',
  minHeight: '50px',
  padding: '50px 10px',
  textAlign: 'center',
  width: '98%',
  height: '80%',
  overflowY: "auto",
  overflowX: 'hidden'
};

function a(props) {
  console.log(props, 2222222222);
  return {a: 13};
}

export function Droppable(props) {
  const {isOver, setNodeRef} = useDroppable({
    id: props.id,
  });

  return (

    <SortableContext
      items={props.item}
      strategy={verticalListSortingStrategy}
    >
      <div
        style={{...style, border: isOver ? '2px solid red' : '1px dashed gray'}}
        ref={setNodeRef}
      >
        {props.children}
      </div>
    </SortableContext>

  );
}

